<script setup lang="ts">
import { measureDistance, measureArea, clearLayerAndSource } from '@/utils/measure'
import { useToolboxStore, usePrintStore } from '@/stores'
import { AdditionInfo, BasicInfo, OutOptions, ScaleInfo } from '@/views/print'

type IformType = 'basicInfo' | 'additionInfo' | 'scaleInfo' | 'outOptions'
const formType: Ref<IformType> = ref('basicInfo')

const formComponets = {
  additionInfo: AdditionInfo,
  basicInfo: BasicInfo,
  outOptions: OutOptions,
  scaleInfo: ScaleInfo
}

const activeStep = computed(() => {
  return ['basicInfo', 'additionInfo', 'scaleInfo', 'outOptions'].indexOf(formType.value) + 1
})

const toolboxStore = useToolboxStore()
const printtingStore = usePrintStore()
const isExpanded = ref(false)
const toolboxId = 'toolbox-Measure'

const handleClickOutside = (event: MouseEvent) => {
  const toolContainer = document.querySelector('.tool-container')
  if (toolContainer && !toolContainer.contains(event.target as Node)) isExpanded.value = false
}

onMounted(() => document.addEventListener('click', handleClickOutside))

onBeforeUnmount(() => document.removeEventListener('click', handleClickOutside))

watch(
  () => toolboxStore.expandedToolboxId,
  (newId) => (isExpanded.value = newId === toolboxId)
)

const toggleExpand = () => {
  if (isExpanded.value) {
    toolboxStore.setExpandedToolboxId('')
  } else {
    toolboxStore.setExpandedToolboxId(toolboxId)
  }
  isExpanded.value = !isExpanded.value
}

function distance() {
  measureDistance(map)
  isExpanded.value = !isExpanded.value
}

function area() {
  measureArea(map)
  isExpanded.value = !isExpanded.value
}

function clear() {
  clearLayerAndSource(map)
  isExpanded.value = !isExpanded.value
}

function print() {
  printtingStore.setTrue()
  isExpanded.value = !isExpanded.value
}

function dialogClosed() {
  printtingStore.resetPrintInfo()
  formType.value = 'basicInfo'
}
</script>

<template>
  <div class="tool-container">
    <div class="tool-row" @click.stop="toggleExpand">
      <img src="@/assets/svgs/toolkit.svg" alt="工具箱" />
      <span>工具箱</span>
      <img src="@/assets/svgs/up.svg" alt="上" v-if="isExpanded" />
      <img src="@/assets/svgs/down.svg" alt="下" v-else />
    </div>
    <transition name="fade">
      <div v-if="isExpanded">
        <div class="tool-row" @click="distance">
          <img src="@/assets/svgs/ruler.svg" alt="测距" />
          <span>测距离</span>
        </div>
        <div class="tool-row" @click="area">
          <img src="@/assets/svgs/trianglerule.svg" alt="测面" />
          <span>测面积</span>
        </div>
        <div class="tool-row" @click="clear">
          <img src="@/assets/svgs/clear.svg" alt="清除" />
          <span>清除</span>
        </div>
        <div class="tool-row" @click="print">
          <img src="@/assets/svgs/printer.svg" alt="地图打印" />
          <span>地图打印</span>
        </div>
      </div>
    </transition>
  </div>
  <div>
    <el-dialog v-model="printtingStore.dialogFormVisible" align-center title="地图打印" @closed="dialogClosed">
      <div style="margin-bottom: 40px">
        <el-steps :active="activeStep" align-center finish-status="success">
          <el-step title="基本信息" />
          <el-step title="小地图信息" />
          <el-step title="比例尺设置" />
          <el-step title="导出选项" />
        </el-steps>
      </div>
      <div class="main-container">
        <transition name="fade-slide" mode="out-in">
          <keep-alive>
            <component :is="formComponets[formType]" v-model="formType" />
          </keep-alive>
        </transition>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.tool-container {
  position: absolute;
  top: 55px;
  width: 80px;
  height: auto;
  left: 265px;
  background-color: #0a1831a0;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .tool-row {
    display: flex;
    align-items: center;
    color: #ccc;
    cursor: pointer;
    padding: 5px 0;

    img {
      width: 20px;
      height: 15px;
      margin-right: 2px;
    }

    span {
      font-size: 12px;
    }
  }
}

.main-container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
</style>
